<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
    </ul>
</body>

</html>
<script>
    //一.箭头函数的特点。
    //1.箭头函数最吸引人的地方是简洁(function)。箭头函数一定是匿名函数。
    // const fn = function(str) {
    //     return str;
    // }
    // const fn = str => str;
    // console.log(fn('箭头函数又来了'));

    // const sum = function(a, b) {
    //     return a + b;
    // }

    // const sum = (a, b) => a + b;
    // console.log(sum(3, 5));


    // const fn1 = function(a) {
    //     a++;
    //     return a;
    // }

    // const fn1 = a => {
    //     a++;
    //     return a;
    // }

    // console.log(fn1(4));

    // 总结：函数省略了function,如果参数只有一个省略了括号,如果函数体内只有一条return语句，省略花括号和return关键字。

    //2.同时函数体内this对象，就是定义时所在的对象，而不是使用时所在的对象。this不会改变了。(普通函数的this是调用时候确定)
    // 箭头函数里面的this来自于父级。而且不会改变。
    // 不要在最外层定义箭头函数，因为在函数内部操作this会很容易污染全局作用域window。最起码在箭头函数外部包一层普通函数，将this控制在可见的范围内；

    // const fn = () => {
    //     alert(this);
    // }

    // fn(); //window
    // fn.call('hello'); //window


    // const aLi = document.querySelectorAll('ul li');
    // for (let i = 0; i < aLi.length; i++) {
    //     aLi[i].onclick = function() {
    //         //this:当前点击li元素
    //         window.setTimeout((() => {
    //             alert(this)
    //             this.innerHTML = '22222222222222222222';
    //         }).bind(window), 2000); //bind无效，无法改变this
    //     };
    // }

    //3.不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
    // const fn = () => {
    //     console.log('123');
    // };

    // new fn(); //fn is not a constructor: fn不是一个构造函数(constructor)。

    //4.不可以使用arguments对象，该对象在函数体内不存在。
    // const fn = () => {
    //     console.log(arguments.length);//arguments is not defined
    // };
    // fn(1, 2, 3, 4);

    //5.箭头函数适合于无复杂逻辑纯函数场景下，例如用在map、reduce、filter、foreach的回调函数(函数当作参数)定义中
    //箭头函数不适合很复杂的代码，适合简洁的写法，最适合回调函数。
    // window.setInterval(() => {}, interval);
    // [1, 2, 3].map((v) => {
    //     console.log(v);
    // });
</script>